<template>
<uni-shadow-root class="goods-category-components-c-tabbar-c-tabbar-more-index"><view class="c-tabbar-more">
  <view class="c-tabbar-more__btn" @click="changeFold">
    <view :class="'wr '+(unfolded ? 'wr-arrow-up':'wr-arrow-down')"></view>
  </view>
  <view class="t-tabbar-more__boardwrapper" v-if="unfolded">
    <view class="t-tabbar-more__mask"></view>
    <scroll-view class="c-tabbar-more__board" :style="boardMaxHeight ? 'height:' + boardMaxHeight + 'px;' : ''" scroll-y>
      <view class="c-tabbar-more__boardinner">
        <view v-for="(item,index) in (tabList)" :key="item.index" class="c-tabbar-more__item text-overflow" :data-index="index" @click="onSelect">
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
  </view>
</view></uni-shadow-root>
</template>

<script>

global['__wxVueOptions'] = {components:{}}

global['__wxRoute'] = 'goods-category/components/c-tabbar/c-tabbar-more/index'
Component({
  externalClasses: ['custom-class'],

  properties: {
    tabList: Array,
  },

  data: {
    unfolded: false,
    boardMaxHeight: null,
  },
  attached() {
    wx.createSelectorQuery()
      .in(this)
      .select('.c-tabbar-more')
      .boundingClientRect((rect) => {
        this.setData({ boardMaxHeight: rect.height });
      })
      .exec();
  },

  methods: {
    changeFold() {
      this.setData({
        unfolded: !this.data.unfolded,
      });
      const { unfolded } = this.data;
      this.triggerEvent('change', { unfolded });
    },

    onSelect(event) {
      const activeKey = event.currentTarget.dataset.index;
      this.triggerEvent('select', activeKey);
      this.changeFold();
    },
  },
});
export default global['__wxComponents']['goods-category/components/c-tabbar/c-tabbar-more/index']
</script>
<style platform="mp-weixin">
.c-tabbar-more {
  width: 100%;
  height: calc(100% - var(--tabbar-height, 100rpx));
  position: absolute;
  top: var(--tabbar-height, 100rpx);
}
.c-tabbar-more__btn {
  position: absolute;
  top: calc(0rpx - var(--tabbar-height, 100rpx));
  right: 0;
  width: 80rpx;
  height: var(--tabbar-height, 100rpx);
  line-height: var(--tabbar-height, 100rpx);
  background-color: var(--tabbar-background-color, white);
  box-shadow: -20rpx 0 20rpx -10rpx var(--tabbar-background-color, white);
  text-align: center;
}
.c-tabbar-more__btn .market {
  font-size: 20rpx;
}
.t-tabbar-more__boardwrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.t-tabbar-more__mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.c-tabbar-more__board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
}
.c-tabbar-more__boardinner {
  padding: 20rpx 0 20rpx 20rpx;
  background-color: var(--tabbar-background-color, white);
  display: flex;
  flex-flow: row wrap;
}
.c-tabbar-more__item {
  margin: 0 20rpx 20rpx 0;
  flex: 0 0 calc((100% - 60rpx) / 3);
  box-sizing: border-box;
  padding: 0 10rpx;
  border-radius: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 22rpx;
  color: #5d5d5d;
  background-color: #eee;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>